/*
  学习目标：处理this指向问题的两种办法
  原理： 通过箭头函数， 自动绑定this
*/
import React, { Component } from 'react';

export default class App extends Component {
  state = {
    xxx: 123,
  };
  handleXxxx() {
    // 🔔 React非自带结构中, this指向不正确, 指向undefined
    console.log('this  ----->  ', this);
  }

  // 2. 👍 使用箭头函数， 定义函数
  handleClick = () => {
    console.log('this  ----->  ', this);
  };
  render() {
    // 🔔 React自带结构中, this指向正确, 指向组件实例对象
    console.log('render中的this  ----->  ', this);
    return (
      // 1. render函数内， 使用箭头函数，绑定事件
      <div>
        <button
          onClick={() => {
            // 箭头函数没有this，会找外层作用域内的this， 会找到render函数中的this
            this.handleXxxx();
          }}
        >
          箭头函数绑定-点我
        </button>
        <button onClick={this.handleXxxx}>普通函数绑定-点我</button>
        <button onClick={this.handleClick}>箭头函数,定义的方法-点我</button>
      </div>
    );
  }
}
